import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Page.vue'),
      meta: {
        title: '首页'
      }
    },
    {
      path: '/warmUp',
      name: 'warmUp',
      redirect: '/warmUp/hello',
      meta: {
        title: '热身'
      },
      children: [
        {
          path: '/warmUp/hello',
          name: 'Hello',
          component: () => import('@/views/warmUp/hello/index.vue'),
          meta: {
            title: '你好'
          }
        }
      ]
    },
    {
      path: '/simple',
      name: 'simple',
      redirect: '/simple/lifeCycle',
      meta: {
        title: '简单'
      },
      children: [
        {
          path: '/simple/lifeCycle',
          name: 'LifeCycle',
          component: () => import('@/views/simple/lifeCycle/index.vue'),
          meta: {
            title: '生命周期钩子'
          }
        },
        {
          path: '/simple/nextUpdateDom',
          name: 'NextUpdateDom',
          component: () => import('@/views/simple/nextUpdateDom/index.vue'),
          meta: {
            title: '下一次DOM更新'
          }
        },
        {
          path: '/simple/domTeleport',
          name: 'DomTeleport',
          component: () => import('@/views/simple/domTeleport/index.vue'),
          meta: {
            title: 'DOM传送门'
          }
        },
        {
          path: '/simple/dynamicsCss',
          name: 'DynamicsCss',
          component: () => import('@/views/simple/dynamicsCss/index.vue'),
          meta: {
            title: '动态CSS'
          }
        },
        {
          path: '/simple/refFamilyBucket',
          name: 'RefFamilyBucket',
          component: () => import('@/views/simple/refFamilyBucket/index.vue'),
          meta: {
            title: 'ref 全家桶'
          }
        },
        {
          path: '/simple/stopPropagation',
          name: 'stopPropagation',
          component: () => import('@/views/simple/stopPropagation/index.vue'),
          meta: {
            title: '阻止事件冒泡'
          }
        },
        {
          path: '/simple/proxy-lose',
          name: 'proxyLose',
          component: () => import('@/views/simple/proxy-lose/index.vue'),
          meta: {
            title: '响应性丟失'
          }
        },
        {
          path: '/simple/capitalize',
          name: 'capitalize',
          component: () => import('@/views/simple/capitalize/index.vue'),
          meta: {
            title: '大写'
          }
        },
        {
          path: '/simple/prop-verify',
          name: 'propVerify',
          component: () => import('@/views/simple/prop-verify/index.vue'),
          meta: {
            title: 'Prop验证'
          }
        },
        {
          path: '/simple/enwrite-computed',
          name: 'enwriteComputed',
          component: () => import('@/views/simple/enwrite-computed/index.vue'),
          meta: {
            title: '可写的计算属性'
          }
        },
        {
          path: '/simple/watch-family',
          name: 'watchFamily',
          component: () => import('@/views/simple/watch-family/index.vue'),
          meta: {
            title: 'watch 全家桶'
          }
        },
        {
          path: '/simple/shallow-ref',
          name: 'shallowRef',
          component: () => import('@/views/simple/shallow-ref/index.vue'),
          meta: {
            title: '浅层 ref'
          }
        }
      ]
    },
    {
      path: '/medium',
      name: 'medium',
      redirect: '/medium/directives-increment',
      meta: {
        title: '简单'
      },
      children: [
        {
          path: '/medium/directives-increment',
          name: 'directivesIncrement',
          component: () => import('@/views/medium/directives-increment/index.vue'),
          meta: {
            title: '优化性能的指令'
          }
        },
        {
          path: '/medium/changer',
          name: 'changer',
          component: () => import('@/views/medium/changer/index.vue'),
          meta: {
            title: '切换器'
          }
        },
        {
          path: '/medium/async',
          name: 'changer',
          component: () => import('@/views/medium/async/index.vue'),
          meta: {
            title: 'until'
          }
        },
        {
          path: '/medium/counter',
          name: 'counter',
          component: () => import('@/views/medium/counter/index.vue'),
          meta: {
            title: '计数器'
          }
        },
        {
          path: '/medium/localStorage',
          name: 'counter',
          component: () => import('@/views/medium/localStorage/index.vue'),
          meta: {
            title: '实现本地存储函数'
          }
        },
        {
          path: '/medium/custom-directive',
          name: 'customDirective',
          component: () => import('@/views/medium/custom-directive/index.vue'),
          meta: {
            title: '切换焦点指令'
          }
        },
        {
          path: '/medium/debouce',
          name: 'debouce',
          component: () => import('@/views/medium/debouce/index.vue'),
          meta: {
            title: '防抖点击指令'
          }
        },
        {
          path: '/medium/fun-component',
          name: 'funComponent',
          component: () => import('@/views/medium/fun-component/index.vue'),
          meta: {
            title: '函数式组件'
          }
        },
        {
          path: '/medium/h-components',
          name: 'hComponents',
          component: () => import('@/views/medium/h-components/index.vue'),
          meta: {
            title: '渲染函数[h()]'
          }
        },
        {
          path: '/medium/fun-modifier',
          name: 'funModifier',
          component: () => import('@/views/medium/fun-modifier/index.vue'),
          meta: {
            title: '按键修饰符'
          }
        },
        {
          path: '/medium/mouse-location',
          name: 'mouseLocation',
          component: () => import('@/views/medium/mouse-location/index.vue'),
          meta: {
            title: '鼠标坐标'
          }
        },
        {
          path: '/medium/global-css',
          name: 'globalCss',
          component: () => import('@/views/medium/global-css/index.vue'),
          meta: {
            title: '全局CSS'
          }
        },
        {
          path: '/medium/raw-value',
          name: 'rawValue',
          component: () => import('@/views/medium/raw-value/index.vue'),
          meta: {
            title: '原始值 API'
          }
        },
        {
          path: '/medium/effect-scope-api',
          name: 'effectScopeApi',
          component: () => import('@/views/medium/effect-scope-api/index.vue'),
          meta: {
            title: 'Effect作用域 API'
          }
        }
      ]
    },
    {
      path: '/difficulty',
      name: 'difficulty',
      redirect: '/difficulty/tree-components',
      meta: {
        title: '困难'
      },
      children: [
        {
          path: '/difficulty/tree-components',
          name: 'treeComponents',
          component: () => import('@/views/difficulty/tree-components/index.vue'),
          meta: {
            title: '树组件'
          }
        },
        {
          path: '/difficulty/custom-components',
          name: 'customComponents',
          component: () => import('@/views/difficulty/custom-components/index.vue'),
          meta: {
            title: '自定义元素'
          }
        },
        {
          path: '/difficulty/custom-ref',
          name: 'customRef',
          component: () => import('@/views/difficulty/custom-ref/index.vue'),
          meta: {
            title: '自定义ref'
          }
        },
        {
          path: '/difficulty/active-style',
          name: 'activeStyle',
          component: () => import('@/views/difficulty/active-style/index.vue'),
          meta: {
            title: '激活的样式-指令'
          }
        },
        {
          path: '/difficulty/custom-model',
          name: 'custom-model',
          component: () => import('@/views/difficulty/custom-model/index.vue'),
          meta: {
            title: '实现简易版`v-model`指令'
          }
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

export default router
